<template>
  <div class="container">
    <el-row>
      <el-col :xs="{span:22,offset:1}" :sm="{span:7,offset:0}">
        <router-link to="/manage/list/1" tag="div" class="list list1">
          <p class="p-top">
            <i class="el-icon-s-comment"></i>
            <span>26</span>
          </p>
          <p class="p-bottom">
            待处理任务
            <i class="el-icon-caret-right"></i>
          </p>
        </router-link>
      </el-col>
      <el-col :xs="{span:22,offset:1}" :sm="{span:7,offset:1}">
        <router-link to="/manage/list/2" tag="div" class="list list2">
          <p class="p-top">
            <i class="el-icon-s-order"></i>
            <span>16</span>
          </p>
          <p class="p-bottom">
            待维修任务
            <i class="el-icon-caret-right"></i>
          </p>
        </router-link>
      </el-col>
      <el-col :xs="{span:22,offset:1}" :sm="{span:7,offset:1}">
        <router-link to="/manage/revisdata" tag="div" class="list list3">
          <p class="p-top">
            <i class="el-icon-s-custom"></i>
            <span>Information</span>
          </p>
          <p class="p-bottom">
            修改资料
            <i class="el-icon-caret-right"></i>
          </p>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.container {
  .list {
    height: 160px;
    margin-bottom: 10px;
    cursor: pointer;
    .p-top {
      height: 110px;
      display: flex;
      justify-content: space-between;
      i {
        color: #fff;
        height: 100%;
        font-size: 80px;
      }
      span {
        color: #fff;
        font-size: 40px;
        margin-top: 10px;
        margin-right: 20px;
      }
    }
    .p-bottom {
      background-color: #fff;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      i {
        float: right;
        margin-top: 15px;
        font-size: 20px;
      }
    }
  }
  .list1 {
    border: 1px solid #2182d1;
    .p-top {
      background-color: #2182d1;
    }
    .p-bottom {
      color: #2182d1;
    }
  }
  .list2 {
    border: 1px solid #45d44c;
    position: relative;
    .p-top {
      background-color: #45d44c;
      span:after {
        content: "News Tasks";
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: 60px;
      }
    }
    .p-bottom {
      color: #45d44c;
    }
  }
  .list3 {
    border: 1px solid #f59b34;
    position: relative;
    .p-top {
      background-color: #f59b34;
      span {
        font-size: 30px;
        margin-right: 10px;
      }
      span:after {
        content: "个人信息";
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: 56px;
      }
    }
    .p-bottom {
      color: #f59b34;
    }
  }
}
</style>